<template>
    <div id="app">
        <m-header class="app-header"></m-header>
        <loading v-if="isLoading"></loading>
        <router-view class="content"></router-view>
        <m-footer></m-footer>
    </div>
</template>

<script type="text/ecmascript-6">
import MHeader from 'components/m-header/m-header';
import MFooter from 'components/m-footer/m-footer';
import Home from 'components/home/home';
import Loading from 'components/loading/loading';
import { mapState } from 'vuex';

export default {
    components: {
        MHeader,
        MFooter,
        Loading,
        Home
    },
    computed: {
        ...mapState({
            isLoading: state => state.isLoading
        })
    }
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
// .content
//     margin-top 60px
//     background-image: url('http://weddingimg-oss.tvunetworks.cn/weddinglive-image/20181122/29c328ba9f34470e83eeae141ac5e69d.png'), url('http://weddingimg-oss.tvunetworks.cn/weddinglive-image/20181122/6b87c1adac824effa9f050829e54e052.png')
//     background-position: left 96%,right 38%
//     background-repeat: no-repeat
//     background-attachment: fixed
//     background-size 14%
    // background: url(../static/image/bgGraphic.png) no-repeat 0% -80% fixed
    // background-size cover
@media screen and (max-width 1300px)
    .content
        margin-top 60px
@media screen and (max-width 900px)
    .content
        margin-top 60px
@media screen and (width 828px)
    .content
        margin-top 0px
@media screen and (max-width 767px)
    .app-header
        height 50px
        background none
    .content
        margin-top 0
        background-image none
</style>
